<div class="list-group list-view-pf">
    <div class="list-group-item list-view-pf-stacked" *ngFor="let api of apis" [class.active]="isSelected(api)" (click)="toggleApiSelected(api)">
        <div class="list-view-pf-main-info">
            <div class="list-view-pf-left">
                <span [title]="apiIconTitle(api)" class="api-list-icon list-view-pf-icon-sm"
                      [class.oai2-icon24]="isOpenApi20(api)"
                      [class.oai3-icon24]="isOpenApi30(api)"
                      [class.graphql-icon24]="isGraphQL(api)"
                      [class.aai2-icon24]="isAsyncApi20(api)"></span>
            </div>
            <div class="list-view-pf-body">
                <div class="list-view-pf-description">
                    <div class="list-group-item-heading">
                        <a [routerLink]="[api.id]">{{ api.name }}</a>
                    </div>
                    <div class="list-group-item-text">
                        <markdown-summary [data]="api.description" emptyText="No description available."></markdown-summary>
                    </div>
                </div>
                <div class="list-view-pf-additional-info">
                    <tag-list [tags]="api.tags" (tagSelected)="selectTag($event)" [maxWidth]="120"></tag-list>
                </div>
            </div>
        </div>
    </div>
</div>
